Skip to content

Add icon button hover states and retire five deprecated colour aliases - #3248

Open
tuguirazvan wants to merge 4 commits into
masterfrom
enhancement/icon-button-states-token-cleanup
Open

Add icon button hover states and retire five deprecated colour aliases#3248
tuguirazvan wants to merge 4 commits into
masterfrom
enhancement/icon-button-states-token-cleanup

Conversation

@tuguirazvan

@tuguirazvan tuguirazvan commented Aug 17, 2026

Copy link
Copy Markdown
Collaborator

The shortcode box, the email chips and the full screen close button each had a focus state and nothing for hover.

Pairs with Strategy11/formidable-pro#6561 for the alias sweep on the Pro side.

In this update,

  1. The ⋯ shortcode box and the CC / BCC / Reply To chips tint on hover and give slightly on press
  2. The shortcode box swapped its glyph in a single frame; it now blooms in. A MutationObserver covers every call site — note attributeFilter cannot be used, as it misses the xlink:href writes hideShortcodes() makes
  3. The close button is sized from the icon button component in the Formidable System file (40×40, --small-radius). Its anchor had no dimensions before, so the target was only as big as the 20px glyph
  4. Adds --primary-100, derived to sit between 50 and 200 at the spacing the grey ramp uses for its own 100
  5. Retires --dark-grey, --grey, --grey-border, --primary-hover and --light-blue in favour of the tokens they alias. --primary-color is deliberately left alone: Pro sets it inline as an override hook, so renaming its readers would silently break that and any customer CSS doing the same

On the red DeepSource check: it reports four issues in admin.js (lines 7235, 7636, 7640, 8049). All four are pre-existing and unmodified — this PR adds three lines to that file, shifting them down by one, so DeepSource counts them as newly introduced. Left as-is rather than touching unrelated code.


Merge order: none required. This stops core using the deprecated aliases but keeps all six defined in _variables.scss, so Formidable Pro and any add-on reading them are unaffected whichever way round these land. Pairs with Strategy11/formidable-pro#6561, which does the same sweep on the Pro side.

Follow-up, deliberately not done here: removing the definitions. That is the breaking change, and it can only happen once nothing references them — core is clean after this, Pro after #6561, but third-party add-ons and customer CSS are unknown. Worth its own PR in a release where a breaking-change note fits.

@coderabbitai

coderabbitai Bot commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@tuguirazvan, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 50 minutes

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: fabe3084-e4c2-4c06-9c25-7585880b74d7

📥 Commits

Reviewing files that changed from the base of the PR and between 889d6af and 7698905.

📒 Files selected for processing (33)
  • css/frm_admin.css
  • css/frm_testing_mode.css
  • js/formidable-web-components.js
  • js/formidable_admin.js
  • js/src/admin/admin.js
  • js/src/admin/showBoxIconSwap.js
  • js/src/web-components/frm-border-radius-component/frm-border-radius-component.css
  • js/src/web-components/frm-colorpicker-component/frm-colorpicker-component.css
  • js/src/web-components/frm-dropdown-component/frm-dropdown-component.css
  • js/src/web-components/frm-range-slider-component/frm-range-slider-component.css
  • js/src/web-components/frm-tab-navigator-component/frm-tab-navigator-component.css
  • js/src/web-components/frm-typography-component/frm-typography-component.css
  • resources/scss/admin/base/_variables.scss
  • resources/scss/admin/components/_full-close.scss
  • resources/scss/admin/components/builder/_divider-icons.scss
  • resources/scss/admin/components/button/_button.scss
  • resources/scss/admin/components/form/_empty-fields.scss
  • resources/scss/admin/components/form/_fields.scss
  • resources/scss/admin/components/form/_toggle-components.scss
  • resources/scss/admin/components/icons/_icon-font.scss
  • resources/scss/admin/components/list/_code-list.scss
  • resources/scss/admin/components/list/_template-list.scss
  • resources/scss/admin/components/modal/_bulk-modal.scss
  • resources/scss/admin/components/modal/_bulk-options.scss
  • resources/scss/admin/components/modal/_dialog.scss
  • resources/scss/admin/components/notifications/_notification-settings.scss
  • resources/scss/admin/components/settings/_has-shortcodes.scss
  • resources/scss/admin/components/settings/_on-submit-action.scss
  • resources/scss/admin/layout/page/_screen-meta.scss
  • resources/scss/admin/layout/page/_views-admin-icons.scss
  • resources/scss/admin/layout/sidebar/_sidebar.scss
  • resources/scss/admin/layout/top-bar/_elements.scss
  • tests/cypress/support/commands.js

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@deepsource-io

deepsource-io Bot commented Aug 17, 2026

Copy link
Copy Markdown

DeepSource Code Review

We reviewed changes in 889d6af...7698905 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

Important

Some issues found as part of this review are outside of the diff in this pull request and aren't shown in the inline review comments due to GitHub's API limitations. You can see those issues on the DeepSource dashboard.

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
PHP Aug 19, 2026 3:23p.m. Review ↗
JavaScript Aug 19, 2026 3:23p.m. Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

@tuguirazvan
tuguirazvan force-pushed the enhancement/icon-button-states-token-cleanup branch 2 times, most recently from 62d0df5 to 86bf452 Compare August 18, 2026 05:31
The shortcode box, the email chips and the full screen close button had no hover
state. The shortcode box also swapped its glyph in a single frame, so it now
blooms in. The close button is sized from the icon button component in the
Formidable System file and had no hit area of its own before.

Adds --primary-100 and replaces --dark-grey, --grey, --grey-border,
--primary-hover and --light-blue with the tokens they alias. --primary-color is
deliberately left: Pro sets it inline as an override hook, so renaming its
readers would silently break that and any customer CSS doing the same.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@tuguirazvan
tuguirazvan force-pushed the enhancement/icon-button-states-token-cleanup branch from 86bf452 to c9da5a7 Compare August 18, 2026 05:35
tuguirazvan and others added 2 commits August 18, 2026 09:19
…tton-states-token-cleanup

# Conflicts:
#	js/formidable_admin.js
The same control ships under two classes: .frm-show-box opens the shortcode
popup and .frm-show-inline-modal opens the inline one, including the boxes in
the field options panel. Only the first had the hover, press and icon bloom,
so the sidebar kept the untouched transition: all.

Both the styles and the MutationObserver now match either class; the observer
alone would have left the bloom silent even with the styles extended.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This branch had downgraded it to string concatenation, which oxlint's
prefer-template rejects. Reverting to master's version removes the change
from the diff entirely.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant